// @ts-nocheck
import styles from './index.module.less';
import { make } from '../../utils/dom';
import FormRender from './formRender';
import { getSearchParams, store } from '@/utils';
import { addForm } from '@/views/home/dataModel';

class Form {
    static get toolbox() {
        return {
            title: 'Form',
            icon: `<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
        <rect x="4" y="8" width="40" height="32" rx="2" fill="#2F88FF" stroke="#000000" stroke-width="4" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 29H44H4Z" fill="#2F88FF"/>
        <path d="M4 29H44" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 19H44H4Z" fill="#2F88FF"/>
        <path d="M4 19H44" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M17 40V19V40Z" fill="#2F88FF"/>
        <path d="M17 40V19" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 38V17V38Z" fill="#2F88FF"/>
        <path d="M4 38V17" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M44 38V17V38Z" fill="#2F88FF"/>
        <path d="M44 38V17" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M31 40V19V40Z" fill="#2F88FF"/>
        <path d="M31 40V19" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9 40H39" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>`
        };
    }

    static get isReadOnlySupported() {
        return true;
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            id: data.id,
            uid: data.uid,
            mode: data.mode,
            title: data.title || '',
            config: data.config || [
                {
                    type: 'input',
                    id: '1',
                    name: '姓名',
                    value: ''
                }
            ],
        };

        this.api = api;

        this.readOnly = readOnly;

        this.config = config || { placeholder: '向AI发送你的需求~' };

        this.wrapper = undefined;
    }

    render() {
        this.wrapper = make('div', styles['cx-custom-form']);

        const formRender = new FormRender({
            ...this.data,
            onSave: (data) => {
                this.data = { mode: 'readOnly', ...data };
                this.update(this.data);
            },
            onSubmit: (form) => {
                if (this.readOnly) {
                    addForm({
                        form
                    })
                }
            }
        });
        const form = formRender.render();

        // 是否显示编辑按钮
        if (this.data.mode === 'readOnly' && !this.readOnly) {
            const editBtn = make('div', styles['cx-custom-form-editBtn'], { innerText: '编辑' });
            this.wrapper.append(editBtn);
            editBtn.addEventListener('click', () => {
                this.update({
                    ...this.data,
                    mode: 'edit'
                });
            }, false);
        }

        // 是否显示查看数据按钮
        if (this.data.mode === 'readOnly' && this.readOnly) {
            const dataBtn = make('div', styles['cx-custom-form-editBtn'], { innerText: '查看数据' });
            this.wrapper.append(dataBtn);
            dataBtn.addEventListener('click', () => {
                const pid = getSearchParams().id;
                window.open(`/docx-vue/design/form?pid=${pid}`);
            }, false);
        }

        this.wrapper.append(form);

        return this.wrapper;
    }

    update(data) {
        const curIdx = this.api.blocks.getCurrentBlockIndex();
        const curBlock = this.api.blocks.getBlockByIndex(curIdx);
        this.data = { ...data, id: curBlock.id };
        this.api.blocks.update(curBlock.id, this.data);
    }

    save(blockContent) {
        return this.data
    }
}

export default Form